<template>
  <div class="card">
    <el-input style="width: 260px;margin-right: 5px" v-model="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
    <el-button type="primary">查询</el-button>
  </div>
  <div class="card" style="margin-bottom: 5px">
    <el-button type="danger">批量删除</el-button>
    <el-button type="primary">新 增</el-button>
    <el-button type="success">批量导入</el-button>
    <el-button type="info">批量导出</el-button>
  </div>
  <div class="card" style="margin-bottom: 5px">
  <el-table :data="data.tableData" style="width: 100%" :header-cell-style="{color:'#333',backgroundColor:'#fdf2f2'}">
    <el-table-column type="selection" width="55S"/>
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="phone" label="电话"  />
    <el-table-column prop="address" label="地址" width="180"/>
  </el-table>
  </div>
  <div class="card">
    <el-pagination
        v-model:current-page="data.pageNum"
        :page-size="data.pageSize"
        layout="total, prev, pager, next"
        :total="data.total"
    />
  </div>

</template>
<script setup lang="ts">
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
const data = reactive({
  name: null,
  pageNum:1,
  pageSize:5,
  total:7,
  tableData:[
    {name:'小刘',phone:'12345678911',address:'江西省赣州市'},
    {name:'小王',phone:'12345678912',address:'江西省萍乡市'},
    {name:'小罗',phone:'12345678913',address:'江西省南昌市'},
    {name:'小李',phone:'12345678914',address:'江西省鹰潭市'},
    {name:'小何',phone:'12345678915',address:'江西省赣州市'},
    {name:'小八',phone:'12345678916',address:'江西省赣州市'},
    {name:'小杨',phone:'12345678917',address:'江西省赣州市'},


  ]
})
</script>
